<div id="app">
    <input type="file" id="select" @change="changeImg()">
    <button @click="uploadImage()">上传</button>
</div>

<script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="../js/jquery-ui.min.js"></script>
<script type="text/javascript" src="../js/vue/vue.js"></script>
<script type="text/javascript" src="../js/vue/qs.js"></script>
<script type="text/javascript" src="../js/vue/axios.js"></script>

<script type="text/javascript">
    let vm = new Vue({
        el : "#app",
        data() {
            return {
                imageFile: null
            };
        },
        methods: {
            changeImg(){
                let that = this;
                //新建文件读取对象
                let reader = new FileReader();
                //读取上传的图片
                reader.readAsDataURL(document.getElementById("select").files[0]);
                //加载
                reader.onload = function (){
                    //将加载的值赋值给缩略图src
                    that.urls = this.result;
                }
            },
            uploadImage() {
                console.log('/common/uploadImage');
                let formData = new FormData();
                formData.append('imageFile', document.getElementById("select").files[0]);
                formData.append('account', 'oldChen');
                axios.post('/common/uploadImage', formData, {
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
                }).then(response => {
                    console.log('上传成功');
                }).catch(error => {
                    console.log('上传失败');
                });
            }
        }
    })
</script>